<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>品牌管理</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <div class="clearfix mb-20">
          <Button custom-icon="iconfont icon-fangkuai2"
                  type="primary"
                  size="small"
                  style="float:right"
                  @click="showModal({},'add')">添加</Button>
        </div>
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border
                   :loading="list.loading"
                   :columns="list.columns"
                   :data="list.tableData"
                   @on-selection-change="selectionChange">
              <template slot-scope="{ row }"
                        slot="image">
                <div style="max-width:200px;overflow:hiden"
                     @click="showBigPic(row.image)">
                  <img style="height:150px;width:auto"
                       :src="row.image"
                       alt="">
                </div>
              </template>
              <template slot-scope="{ row }"
                        slot="tradeChannel">
                <span>{{ row.tradeChannel==1?'微信支付':row.tradeChannel==2?'支付宝':row.tradeChannel==3?'口信支付':row.tradeChannel==4?'现金支付':'积分支付' }} </span>
              </template>
              <template slot-scope="{ row }"
                        slot="action">
                <ButtonGroup>
                  <Button type="primary" @click="showModal(row, 'edit')">编辑</Button>
                  <Button type="warning" @click="delData(row)">删除</Button>
                </ButtonGroup>
              </template>
            </Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr"
                  :total="queryData.totalRecord"
                  :page-size="queryData.pageSize"
                  :current="queryData.page"
                  @on-change="changePage"
                  @on-page-size-change="onPageSizeChange"
                  show-elevator
                  show-total
                  show-sizer></Page>
          </div>
        </div>
      </div>
      <Modal width="600"
             v-model="logShow"
             footer-hide
             title="交易详情">
        <div>
          <div style="display:flex;margin-bottom:10px">
            <!-- <Input class="mr-10"
                   v-model="queryLog.businessName"
                   placeholder="商户名称"
                   style="width: 200px" />

            <sele @ProvinceData="childByValue2"
                  class="mr-10"
                  style="width:200px"></sele>
            <Button type="primary"
                    custom-icon="iconfont icon-chaxun"
                    size="small"
                    @click="getLog">查找</Button> -->

          </div>
          <Table stripe
                 highlight-row
                 border
                 :content="self"
                 :columns="logCol"
                 :data="logList"></Table>
        </div>
        <!-- <div class="page">
          <Page :total="queryLog.totalRecord"
                :page-size="queryLog.limit"
                :current="queryLog.page"
                show-total
                show-elevator
                @on-change="logCpage"></Page>
        </div> -->
      </Modal>
      <Modal v-model="modal.brand.isShow"
             :loading="modal.brand.loading"
             :mask-closable="false"
             :title="modal.brand.title"
             @on-ok="postData">
        <Form ref="systemFrom"
              :model="modal.brand.formData"
              :rules="modal.brand.rules"
              :label-width="120">
          <FormItem label="品牌中文名称">
            <Input v-model="modal.brand.formData.nameZh"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="品牌英文名称">
            <Input v-model="modal.brand.formData.nameEn"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="描述">
            <Input v-model="modal.brand.formData.description"
                   style="width: 300px" />
          </FormItem>
          <FormItem label="状态"
                    prop="state">
            <i-switch size="large"
                      @on-change="change"
                      v-model="modal.brand.formData.state"
                      :value="modal.brand.formData.state">
              <span slot="open">正常</span>
              <span slot="close">停用</span>
            </i-switch>
          </FormItem>
          <FormItem label="图片"
                    prop="image">
            <upload-image ref="upload"
                          :uploadList.sync="modal.brand.formData.uploadList1"
                          @imageupload="mainImg"
                          imgSize="1"></upload-image>
          </FormItem>
        </Form>
      </Modal>
      <Modal v-model="modal.img.isShow"
             width="800px">
        <img :src="modal.img.url"
             style="width: auto; height: 500px; display: block; margin: 0 auto" />
        <div slot="footer" />
      </Modal>
    </div>
  </div>
</template>
<script>
import uploadImage from '@/components/upload-image/upload-image'
import sele from '@/view/test/city.vue'
import BrandApi from '@/api/business/brand.js'
import Uploadoss from '@/components/uploadoss'

import global from '@/assets/js/global'
import { Message } from 'iview'
export default {
  components: {
    sele,
    Uploadoss,
    uploadImage
  },
  mounted () {
    this.getTableData()
  },
  data () {
    return {
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // {
          //   type: 'selection',
          //   width: 50,
          //   align: 'center'
          // },
          /** 开始自动生成 */
          { title: 'id', key: 'id', align: 'center', width: '100px' },
          {
            title: '品牌中文名称',
            key: 'nameZh',
            align: 'center',
            width: '140px'
          },
          {
            title: '品牌英文名称',
            key: 'nameEn',
            align: 'center',
            width: '200px'
          },
          {
            title: '描述',
            key: 'description',
            align: 'center',
            width: '230px'
          },
          {
            title: '品牌图片',
            key: 'image',
            align: 'center',
            width: '200px',
            slot: 'image'
          },
          {
            title: '排序',
            key: 'sort',
            align: 'center',
            width: '150px'
          },
          {
            title: '状态',
            key: 'state',
            align: 'center',
            width: '130px',
            render: (create, params) => {
              let s = params.row.state
              let color, text
              if (s) {
                color = '#5ed71a'
                text = '正常'
              } else {
                color = '#d72c23'
                text = '停用 '
              }
              return create(
                'div',
                {
                  style: {
                    color: color,
                    borderRadius: '20px'
                  }
                },
                text
              )
            }
          },
          {
            title: '添加时间',
            key: 'createTime',
            align: 'center'
          },
          {
            // 操作
            title: '操作',
            key: 'action',
            width: 200,
            align: 'center',
            fixed: 'right',
            slot: 'action'
            // render: (create, params) => {
            //   // 创建父节点
            //   return create(
            //     'div',
            //     [
            //       create(
            //         'i-button',
            //         {
            //           props: { type: 'warnning', size: 'small' },
            //           style: { margin: '0 3px' },
            //           on: {
            //             click: () => {
            //               // this.queryLog.tradeId = params.row.tradeId
            //               // this.getLog()
            //               // this.logShow = true
            //               this.showModal(params.row, 'edit')
            //             }
            //           }
            //         },
            //         '修改'
            //       )
            //     ],
            //     [
            //       create(
            //         'i-button',
            //         {
            //           props: { type: 'error', size: 'small' },
            //           style: { margin: '0 3px' },
            //           on: {
            //             click: () => {
            //               this.$Modal.confirm({
            //                 title: '删除',
            //                 content:
            //                   '<p>你确认删除 <strong class="color-red">' +
            //                   params.row.businessName +
            //                   '</strong> 品牌吗，此操作不可逆，请谨慎操作！</p>',
            //                 onOk: () => {
            //                   BrandApi.del(params.row.id).then(() => {
            //                     this.$Message.success('删除成功')
            //                     this.getTableData()
            //                   })
            //                 }
            //               })
            //             }
            //           }
            //         },
            //         '删除'
            //       )
            //     ]
            //   )
            // }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0
      },
      queryExport: {},
      // 商户管理员参数
      queryLog: {
        limit: 10,
        page: 1,
        totalRecord: ''
      },
      logShow: false, // 商户管理员是否显示
      logList: [], // 商户管理员列表
      logCol: [
        { align: 'center', title: '序号', type: 'index', width: 80 },
        {
          align: 'center',
          title: '商品名称',
          key: 'goodsName'
        },
        {
          align: 'center',
          title: '商品条形码',
          key: 'goodsCode'
        },
        {
          align: 'center',
          title: '成交价格',
          key: 'originalPrice'
        },
        {
          align: 'center',
          title: '交易总额',
          key: 'totalMoney'
        }
      ],
      // 政府考评
      modal: {
        brand: {
          id: '',
          isShow: false,
          bigPicVisible: false,
          loading: true,
          bigPicUrl: '',
          type: 'create', // create 新建，update 修改
          title: '添加品牌',
          formData: {}
        },
        img: {
          isShow: false,
          url: ''
        }
      }
    }
  },
  methods: {
    // 获取列表
    getTableData () {
      console.log('query', this.queryData)
      const that = this
      that.queryData.totalRecord = undefined
      BrandApi.getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 修改是否停用
    change (data) {
      console.log('===switch===', data)
    },
    // 图片的校验
    mainImg () {
      //   console.log('v', this.modal.mallProductInfo.formData.uploadList1)
      let imgUrl = this.modal.brand.formData.uploadList1.map((v) => {
        if (v.length < 1) return v
        if (v.response.res.requestUrls[0].indexOf('?') > -1) {
          v = v.response.res.requestUrls[0].split('?')[0]
          return v
        } else {
          v = v.response.res.requestUrls[0]
          return v
        }
      })
      this.modal.brand.formData.uploadList1.forEach((v) => {
        if (v.response.res.requestUrls[0].indexOf('?') > -1) {
          v.response.res.requestUrls[0] =
            v.response.res.requestUrls[0].split('?')[0]
        }
      })
      // 手动去除原图保护
      this.modal.brand.formData.image = imgUrl[0]
      console.log('picUrl', this.modal.brand.formData.uploadList1)
    },
    // 新建&修改
    postData () {
      const that = this
      console.log('===formData===', that.modal.brand.formData)
      that.$refs['systemFrom'].validate((valid) => {
        if (valid) {
          if (!that.modal.brand.formData.id) {
            // 新建
            BrandApi.add(that.modal.brand.formData)
              .then((res) => {
                that.modal.brand.isShow = false
                that.modal.brand.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          } else {
            // 修改
            BrandApi.update(
              that.modal.brand.formData
            )
              .then((res) => {
                that.modal.brand.isShow = false
                that.modal.brand.loading = false
                if (!res.code) {
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          }
        } else {
          that.modal.brand.loading = false
          that.$nextTick(() => {
            that.modal.brand.loading = true
          })
        }
      })
    },

    // 获取详情
    async getLog () {
      let data = (await RecordApi.detial(this.queryLog)).data
      this.queryLog.totalRecord = data.totalRecord
      this.logList = data
    },
    // 删除
    delData (row) {
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除 <strong>' +
          row.nameZh +
          '</strong> 品牌吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          BrandApi.del(row.id).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach((element) => {
        ids.push(element.id)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      this.delData(ids)
    },
    // 查询
    inQuire () {
      const that = this
      that.getTableData()
    },
    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },
    // 考评详情
    showModal (row, type) {
      let that = this
      if (type === 'add') {
        this.modal.brand.type = 'add'
        this.modal.brand.title = '添加品牌'
        this.modal.brand.formData = {}
        this.modal.brand.isShow = true
      } else {
        console.log('===row===', row)
        this.modal.brand.type = 'edit'
        this.modal.brand.title = '修改品牌'
        this.modal.brand.formData = row
        let item = {
          status: 'finished',
          response: {
            res: {
              requestUrls: []
            }
          }
        }
        item.response.res.requestUrls.push(
          row.image
        )
        that.modal.brand.formData.uploadList1 = []
        that.modal.brand.formData.uploadList1.push(item)
        this.modal.brand.isShow = true
      }
    },
    showBigPic (item) {
      this.modal.img.isShow = true
      this.modal.img.url = item
    }
  },

  created () {
    this.getTableData()
  }
}
</script>
